import React from 'react';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Select, Input, Modal, Row, Col, Tooltip, DatePicker,Button } from 'antd';
import moment from 'moment';

const { TextArea } = Input;
const FormItem = Form.Item;
const { Option } = Select;

class ContactPhone extends React.Component {
  // 提交数据
  submitData = () => {
    const { form, submitData, expandConsult } = this.props;
    form.validateFields((err, values) => {
      if (!err) {
        const operms = {
          consultRcrdFlag: expandConsult ? 1 : 2,
          ...values,
        };
        submitData(operms);
      }
    });
  };

  onContact = value => {
    const { contactData } = this.props;
    contactData(value);
  };

  addConsult = () => {
    const { addConsultData, expandConsult } = this.props;
    addConsultData(!expandConsult);
  };

  render() {
    const {
      form: { getFieldDecorator },
      conatctVisible,
      contactFlag,
      expandConsult,
      empTel,
      conTel,
      handleModalVisible,
      selectedRows,
      multiterm,
      contactPhoneLoading,
    } = this.props;

    const tableSearchLayout1 = {
      labelCol: {
        lg: {
          span: 7,
        },
      },
      wrapperCol: {
        lg: {
          span: 14,
        },
      },
    };

    const tableSearchLayout12 = {
      labelCol: {
        lg: {
          span: 7,
        },
      },
      wrapperCol: {
        lg: {
          span: 14,
        },
      },
    };
    const disabledDate = current =>
      // Can not select days before today and today
      current && current < moment().add(-1, 'days');

    return (
      <Modal
        title={multiterm ? '批量标记电话联系' : '新增电话记录'}
        visible={conatctVisible}
        okText="确定"
        cancelText="取消"
        onOk={this.submitData}
        onCancel={() => handleModalVisible(false)}
        bodyStyle={{ padding: 10 }}
        destroyOnClose
        confirmLoading={contactPhoneLoading}
      >
        <Form>
          {multiterm ? (
            <Row>
              <Col span={24}>
                <FormItem label="已选数据" {...tableSearchLayout1} style={{ marginBottom: 6 }}>
                  {selectedRows.length}条
                </FormItem>
              </Col>
            </Row>
          ) : (
            <div>
              <Row>
                <Col span={24}>
                  <FormItem label="姓名" {...tableSearchLayout1} style={{ marginBottom: 6 }}>
                    {empTel || '--'}
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span={24}>
                  <FormItem label="电话" {...tableSearchLayout1} style={{ marginBottom: 12 }}>
                    {conTel || '--'}
                  </FormItem>
                </Col>
              </Row>
            </div>
          )}

          <Row>
            <Col span={24}>
              <FormItem label="联系内容" {...tableSearchLayout1}>
                {getFieldDecorator('contactContent', {
                  rules: [{ required: true, max: 100, message: '请输入不得超过100个字的联系内容' }],
                })(<TextArea rows={2} />)}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <FormItem label="是否再次联系" {...tableSearchLayout12}>
                {getFieldDecorator('againFlag', {
                  rules: [{ required: false }],
                  initialValue: '2',
                })(
                  <Select onChange={this.onContact}>
                    <Option key={1}>是</Option>
                    <Option key={2}>否</Option>
                  </Select>
                )}
              </FormItem>
            </Col>
            </Row>
            <Row>
            <Col span={24}>
              {+contactFlag === 1 ? (
                <FormItem
                  label={
                    <span>
                      再次联系时间
                      <Tooltip
                        title={
                          <span>维护再次联系时间后，系统将会在设置时间进行提醒，注意查收！</span>
                        }
                      >
                        <InfoCircleOutlined style={{ fontSize: 14, marginLeft: 2 }} />
                      </Tooltip>
                    </span>
                  }
                  {...tableSearchLayout12}
                >
                  {getFieldDecorator('againTime', {
                    rules: [
                      {
                        required: +contactFlag === 1,
                        message: '请选择再次联系时间',
                      },
                    ],
                  })(<DatePicker style={{ width: '100%' }} disabledDate={disabledDate} />)}
                </FormItem>
              ) : null}
            </Col>
          </Row>

          <Row>
          <Col span={7}></Col>
          <Col span={14}>
          {multiterm ? null : (
              <Button type="dashed" onClick={this.addConsult} style={{ width: '100%' , marginBottom: '20px' }}>
              添加咨询记录
             </Button>
          )}
          </Col>
          </Row>

          {expandConsult ? (
            <Row>
              <FormItem label="咨询内容" {...tableSearchLayout1}>
                {getFieldDecorator('content', {
                  rules: [{ required: true, max: 100, message: '请输入不得超过100个字的咨询内容' }],
                })(<TextArea rows={2} />)}
              </FormItem>
              <Col span={24}>
                <FormItem
                  label={
                    <span>
                      回复状态
                      <Tooltip
                        title={<span>回复状态未完成时，默认下次联系时间为回复提醒时间</span>}
                      >
                        <InfoCircleOutlined style={{ fontSize: 14 }} />
                      </Tooltip>
                    </span>
                  }
                  {...tableSearchLayout1}
                >
                  {getFieldDecorator('state', {
                    rules: [{ required: false }],
                    initialValue: '2',
                  })(
                    <Select style={{ width: '100%', marginRight: 6 }}>
                      <Option key={2}>未完成</Option>
                      <Option key={1}>已完成</Option>
                    </Select>
                  )}
                </FormItem>
                <Col span={24} />
                <FormItem label="回复内容" {...tableSearchLayout1}>
                  {getFieldDecorator('replyContent', {
                    rules: [
                      { required: true, max: 100, message: '请输入不得超过100个字的回复内容' },
                    ],
                  })(<TextArea rows={2} />)}
                </FormItem>
              </Col>
            </Row>
          ) : null}
        </Form>
      </Modal>
    );
  }
}
export default Form.create()(ContactPhone);
